<template>
  <div>
       <el-table
            :data="tableList"
            border
            highlight-current-row
            empty-text="暂无数据"
            style="width: 100%;">
            <!-- <template slot="empty">
                <i class="el-icon-phone"></i>
                <div class="noCart">
                    当前数据为空~~~
                </div>
            </template> -->
        <el-table-column v-for="(item,key) in tableKey"
                     :key="key"
                     :prop="item.name"
                     :label="item.value"
                     show-overflow-tooltip
                     sortable></el-table-column>
        <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-col :span="8">
                        <el-button type="text" size="small" @click="view(scope.row)" v-if="!process">查看</el-button>
                    </el-col>
                        
                    <el-col :span="8">
                        <auth value="permission.create">
                            <el-button type="text" size="small" @click="edit(scope.row)" v-if="!process">编辑</el-button>
                        </auth>
                    </el-col>

                    <el-col :span="8">
                        <auth value="permission.create">
                            <el-button type="text" size="small" @click="dealwith(scope.row)" v-if="process">处理</el-button>
                        </auth>
                    </el-col>
                </el-row>    
            </template>
        </el-table-column>
    </el-table>
    <page-main></page-main>
    <fixed-action-bar>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </fixed-action-bar>
  </div>
</template>

<script>
export default {
    name: 'TableList',
    data() {
        return {
            currentPage: 1,
            total: 100,
            pageSize: 5,
            tableList: [],
            isAdmin: true
        }
    },
    props:['tableKey','dataList', 'entityKey', 'process'],
    watch: {
        dataList(newVal, oldVal) {
            console.log(newVal);
            this.mountData(newVal)
        }
    }, 
    created() {
        
    },
    mounted() {
        this.mountData(this.dataList)
    },
    methods: {
        handleSizeChange(val) {
            this.tableList = [];
            let count = (this.currentPage-1)*val;
            for(let i = 0; i < val && (i+count) < this.dataList.length; i++) {
                this.tableList.push(this.dataList[i+count])
            }
        },
        // 当前页数发生变化时
        handleCurrentChange(val) {
            // current置空
            this.tableList = [];
            let count = (val-1)*this.pageSize;
            for(let i = 0; i < this.pageSize && (i+count) < this.dataList.length; i++) {
                this.tableList.push(this.dataList[i+count])
            }
        },
        view(row) {
            this.$emit(this.entityKey+'View',row);
        },
        edit(row) {
            this.$emit(this.entityKey+'Edit',row);
        },
        dealwith(row) {
            this.$emit(this.entityKey+'Process',row);
        },
        mountData(data) {
            this.total = data.length
            this.tableList = []
            for(let i = 0; i < this.pageSize && i < data.length; i++) {
                this.tableList.push(data[i])
            }
        }
    },
    watch: {
        dataList(newVal, oldVal) {
            this.mountData(newVal)
        }
    }
}
</script>
